<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { Strategy } from '../../list/components/EditStrategyBtn/types'
  import HButton from '@/components/common/button/HButton.vue'
  import HModal from '@/components/common/Modal/HModal.vue'

  const props = defineProps({
    modalVisible: {
      type: Boolean,
      default: () => false,
    },
    strategy: {
      type: Object as PropType<Strategy>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update', value: Strategy): void
    (e: 'close'): void
  }>()

  // 表单
  const form = ref<Strategy>({
    enableApplyFee: false, //是否开启申请工单费用：false-不开启，true-开启，当enableFeeAuthori=true时生效
    enableApplySpare: false, //是否开启申请工单配件：false-不开启，true-开启，当enableSpareAuthori=true时生效
    enableCheckFee: false, //	是否开启审核工单费用：false-不开启，true-开启，当enableFeeAuthori=true时生效
    enableCheckSpare: false, //是否开启审核工单配件：false-不开启，true-开启，当enableSpareAuthori=true时生效
    enableFeeAuthori: false, //是否开启工单费用权限：false-不开启，true-开启
    enableSpareAuthori: false, //	是否开启工单配件权限：false-不开启，true-开启
  })

  // 确定事件
  const onConfirm = () => {
    emits('update', { ...form.value })
  }

  watch(
    () => props.strategy,
    (value) => {
      form.value = value
    },
    { immediate: true, deep: true },
  )
</script>

<template>
  <div>
    <!-- 修改商家策略弹窗 -->
    <HModal :model-value="props.modalVisible" title="商家策略" @close="$emit('close')" size="small">
      <el-form :model="form">
        <div class="form_content">
          <!--查看配件-->
          <el-form-item label="查看配件">
            <div style="display: flex; align-items: center; gap: 5px">
              <el-switch v-model="form.enableSpareAuthori" />
              <span v-if="form.enableSpareAuthori">开启</span>
              <span v-else>关闭</span>
            </div>
          </el-form-item>

          <!-- 申请和审核先隐藏，后面可能会用到 -->
          <!-- <template v-if="form.enableSpareAuthori"> -->
          <!--申请配件-->
          <!-- <el-form-item label="申请配件">
            <el-radio-group v-model="form.enableApplySpare">
              <el-radio :value="true">启用</el-radio>
              <el-radio :value="false">关闭</el-radio>
            </el-radio-group>
          </el-form-item> -->

          <!--审核配件-->
          <!-- <el-form-item label="审核配件">
            <el-radio-group v-model="form.enableCheckSpare">
              <el-radio :value="true">启用</el-radio>
              <el-radio :value="false">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </template> -->

          <!--查看费用-->
          <el-form-item label="查看费用">
            <div style="display: flex; align-items: center; gap: 5px">
              <el-switch v-model="form.enableFeeAuthori" />
              <span v-if="form.enableFeeAuthori">开启</span>
              <span v-else>关闭</span>
            </div>
          </el-form-item>

          <!-- 申请和审核先隐藏，后面可能会用到 -->
          <!--申请费用-->
          <!-- <template v-if="form.enableFeeAuthori">
          <el-form-item label="申请费用">
            <el-radio-group v-model="form.enableApplyFee">
              <el-radio :value="true">启用</el-radio>
              <el-radio :value="false">关闭</el-radio>
            </el-radio-group>
          </el-form-item> -->

          <!--审核费用-->
          <!-- <el-form-item label="审核费用">
            <el-radio-group v-model="form.enableCheckFee">
              <el-radio :value="true">启用</el-radio>
              <el-radio :value="false">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </template> -->
        </div>
      </el-form>
      <template #footerRight>
        <HButton is-modal type="primary" @click="onConfirm">确定</HButton>
        <HButton is-modal @click="$emit('close')"> 取消 </HButton>
      </template>
    </HModal>
  </div>
</template>

<style scoped lang="scss">
  .form_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
</style>
